<template>
  <el-dialog
    title="定时开关机设置"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="50%">
    <div>
      <el-form size="mini">
        <el-form-item
          v-for="(time, index) in times"
          :label="'时间段' + (index + 1)"
          :key="index"
          :rules="{ required: true, message: '时间段不能为空', trigger: 'blur'}">
          <!--<el-checkbox :indeterminate="isIndeterminate[index]" v-model="checkAll" @change="((val) => { handleCheckAllChange(val, index) })">全选</el-checkbox>-->
          <!--<div style="margin: 10px 0;"></div>-->
          <!--<el-checkbox-group v-model="times[index].checkedWeek" @change="((value) => { handleCheckedCitiesChange(value, index) })">-->
            <!--<el-checkbox v-for="week in weeks" :label="week.value" :key="week.value">{{week.label}}</el-checkbox>-->
          <!--</el-checkbox-group>-->
          <el-time-picker
            format="HH:mm"
            v-model="times[index].time"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择开机时间">
          </el-time-picker>
          <el-time-picker
            format="HH:mm"
            v-model="times[index].end"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择关机时间">
          </el-time-picker>
          <el-button v-if="times.length > 1 || index > 0" type="warning" size="mini" @click.prevent="removeTime(time)">-</el-button>
          <el-button v-if="index + 1 == times.length" type="success" size="mini" @click.prevent="addTime">+</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="submit()">确定</el-button>
    </span>
    </div>
  </el-dialog>
</template>
<style scoped>
  .el-dialog__body {
    padding: 10px !important;
  }

  .el-button.is-circle {
    padding: 7px !important;
  }
</style>
<script>
  export default {
    name: 'stb-switch',
    data: function () {
      return {
        deviceIds: [],
        dataList: [],
        dataListLoading: false,
        dataListSelections: [],
        visible: false,
        checkAll: false,
        checked: {},
        isIndeterminate: [true],
        times: [
          {time:'',end: '', checkedWeek: []}
        ],
        weeks: [
          {
            value: 1,
            label: '周一'
          }, {
            value: 2,
            label: '周二'
          }, {
            value: 3,
            label: '周三'
          }, {
            value: 4,
            label: '周四'
          }, {
            value: 5,
            label: '周五'
          }, {
            value: 6,
            label: '周六'
          }, {
            value: 7,
            label: '周日'
          }

        ]
      }
    },
    mounted () {
    },
    methods: {
      // 获取数据列表
      getInfo: function () {
        this.dataListLoading = true
        console.log(this.deviceIds)
        this.$http({
          url: this.$http.adornUrl('/sys/theme/by-device'),
          method: 'post',
          data: this.$http.adornData(this.deviceIds, false)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.list
          } else {
            this.dataList = []
          }
          this.dataListLoading = false
        })
      },
      init: function (data) {
        this.visible = true
        this.deviceIds = data
        if (data.length === 1) {
          this.getInfo()
        }
      },
      submit () {
        console.log(this.times)
        if(!this.times[0].time){
          this.$message.error('选择开机时间')
          return
        }
        if(!this.times[0].end){
          this.$message.error('选择关机时间')
          return
        }
        var sets = []
        for (var i = 0; i < this.times.length; i++) {
          var time = this.times[i]

          var set = {}
          // if (time.checkedWeek.length === 0 || time.length === 0) {
          //   this.$message.error('周期或时间不允许为空')
          //   return
          // }
          set.week = [1,2,3,4,5,6,7].toString()
          // set.week = time.checkedWeek.toString()
          set.openTime = time.time.pattern('yyyy-MM-dd HH:mm')
          set.closeTime = time.end.pattern('yyyy-MM-dd HH:mm')
          sets.push(set)
        }
        var form = {}
        form.dids = this.deviceIds
        form.switchSetEntities = sets
        this.$http({
          url: this.$http.adornUrl('/generator/stb/setSwitch'),
          method: 'post',
          data: this.$http.adornData(form)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      removeTime (item) {
        if (this.times < 2) {
          return
        }
        var index = this.times.indexOf(item)
        if (index !== -1) {
          this.times.splice(index, 1)
          this.isIndeterminate.splice(index, 1)
        }
      },
      addTime () {
        console.log(this.times)
        this.times.push({
          time: [this.times[this.times.length - 1].time[0], new Date()],
          checkedWeek: []
        })
        this.isIndeterminate.push(true)
      },
      handleCheckAllChange (val, index) {
        console.log('val:' + val + 'index:' + index)
        this.times[index].checkedWeek = val ? this.weeks.map(function (v) { return v.value }) : []
        this.isIndeterminate[index] = false
        console.log(this.isIndeterminate)
      },
      handleCheckedCitiesChange (value, index) {
        let checkedCount = value.length
        this.checkAll = checkedCount === this.times[index].checkedWeek.length
        this.isIndeterminate[index] = checkedCount > 0 && checkedCount < this.times[index].checkedWeek.length
      }
    }
  }
</script>
